<template>
  <div class="app-wrapper" :class="{ hideSidebar: collapsed }">
    <Sidebar class="sidebar-container" :collapsed="collapsed" />

    <div class="main-container">
      <div class="fixed-header">
        <Navbar :collapsed="collapsed" @toggle="appStore.toggleSidebar()" />
        <TagsView v-if="needTagsView" />
      </div>

      <AppMain />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'
import Sidebar from './components/Sidebar.vue'
import Navbar from './components/Navbar.vue'
import TagsView from './components/TagsView.vue'
import AppMain from './components/AppMain.vue'

const appStore = useAppStore()

// 是否折叠：true=折叠，false=展开
const collapsed = computed(() => !!appStore.sidebarCollapsed)
// 需要标签页（你项目里没这个开关就默认 true）
const needTagsView = computed(() => true)
</script>

<style scoped>
.app-wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* 侧边栏容器宽度建议在 Sidebar.vue 里控制，这里只管布局 */
.main-container {
  flex: 1;
  position: relative;
  min-width: 0;
}

/* 顶部固定区 */
.fixed-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

/* 折叠时让 .sidebar-container 变窄（配合 Sidebar.vue） */
.hideSidebar .sidebar-container {
  width: 64px;
}
</style>